<!--  -->
<template>
<div>
<el-container>
  <el-header>
      <hr/>
      <el-row>
      <el-button type="primary" @click="createMerchandise()">新增货物</el-button>
       </el-row>
      </el-header>
  <el-main>
      <el-table
    :data="tableData.filter(data => !search || data.mname.toLowerCase().includes(search.toLowerCase())
    || data.standard.toLowerCase().includes(search.toLowerCase())
    ||data.mid.toString().includes(search.toLowerCase())
    ||data.price.toString().includes(search.toLowerCase())
    ||data.mcount.toString().includes(search.toLowerCase()))"
    style="width: 100%">
    <el-table-column
      label="货物号"
      prop="mid">
    </el-table-column>
    <el-table-column
      label="货物名"
      prop="mname">
    </el-table-column>
    <el-table-column
      label="单价/元"
      prop="price">
    </el-table-column>
    <el-table-column
      label="规格"
      prop="standard">
    </el-table-column>
    <el-table-column
      label="数量"
      prop="mcount">
    </el-table-column>
    <el-table-column
      label="泡/重货物"
      prop="isHeavy"
      width="200">
      <template slot-scope="scope">
                        <el-switch
                            active-text="泡货"
                            inactive-text="重货"
                            on-color="#5B7BFA"
                            off-color="#dadde5"
                            :active-value="1"  
                            :inactive-value="0"
                            v-model="scope.row.isHeavy" 
                            @change=change(scope.$index,scope.row)                
                        >
                        </el-switch>
                        </template>
    </el-table-column>
    
    <el-table-column
      align="right">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入关键字搜索"/>
      </template>
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  </el-main>
  <el-footer>
   <div>
<el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[1,10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
</div>
    </el-footer>
</el-container>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      :close-on-click-modal="false"
    >
      <el-form :model="dataform">
        <el-form-item label="货物名">
          <el-input v-model="dataform.mname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="货物规格">
          <el-input v-model="dataform.standard" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="货物单价">
          <el-input v-model="dataform.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="货物数量">
          <el-input v-model="dataform.mcount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="显示状态" prop="isHeavy">
        <el-switch
          v-model="tableData.isHeavy"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"
          :inactive-value="0"
          active-text="泡货"
          inactive-text="重货"
        ></el-switch>
      </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitData">确 定</el-button>
      </span>
    </el-dialog>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
    return{
        title:'新增货物',
        dialogVisible:false,
        dataform:{
            isHeavy:0,
            mcount: 0,
            mname:'',
            standard:'',
            mid:0,
            price:''
        },
        tableData: {
            isHeavy:0,
            mcount: 0,
            mname:'',
            standard:'',
            mid:0,
            price:''
        },
        search: '',
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
    }
//这里存放数据
return {

};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    handleEdit(index, row) {
        this.title='编辑货物';
        console.log(index, 'row是',row);
        //this.dataform = JSON.parse(JSON.stringify(this.dataform));
        this.dataform.isHeavy=row.isHeavy;
        this.dataform.mname=row.mname;
        this.dataform.mcount=row.mcount;
        this.dataform.mid=row.mid;
        this.dataform.standard=row.standard;
        this.dataform.price=row.price;
        this.dialogVisible=true;
      },
      handleDelete(index, row) {
        console.log(index, row,'mid为',row.mid);
        this.$confirm(`此操作将永久删除${row.mname}该货物, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.$http({
        url: this.$http.adornUrl(`/product/merchandise/delete/${row.mid}`),
        method: 'post',
        data: this.$http.adornData(row.mid, false)
        }).then(({ data }) => { 
            this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getUser();
        });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        
      },
      submitData(){
          if (this.title=='新增货物') {
              this.saveData();
          }else{
              this.updateData();
          }
      },
      updateData(){
          console.log('修改后的数据为',this.dataform);
          
          this.$http({
          url: this.$http.adornUrl('/product/merchandise/update'),
          method: 'post',
          data: this.$http.adornData(this.dataform, false)
          }).then(({ data }) => { 
              this.$message({
              message: "商品修改成功",
              type: "success"
            });
            this.dialogVisible=false;
            this.getUser();
          });
      },
    saveData(){
        console.log("提交的数据为",this.dataform);
        this.$http({
        url: this.$http.adornUrl('/product/merchandise/save'),
        method: 'post',
        data: this.$http.adornData(this.dataform, false)
        }).then(({ data }) => { 
            this.$message({
              message: "商品保存成功",
              type: "success"
            });
            this.getUser();
            this.dialogVisible=false;
        });
    },
    createMerchandise(){
        console.log("被点击了");
        this.title='新增货物';
        this.dataform.isHeavy=0;
          this.dataform.mcount= '';
            this.dataform.mname='';
            this.dataform.standard='';
           this.dataform. mid=0;
           this.dataform. price='';
        
        this.dialogVisible=true;
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getUser();
    },
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getUser();
    },
    getUser(){
        this.$http({
        url: this.$http.adornUrl('/product/merchandise/list'),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize
        })
        }).then(({ data }) => {
            if (data && data.code === 0) {
          this.tableData = data.page.list;
          this.totalPage = data.page.totalCount;
        } else {
          this.tableData = [];
          this.totalPage = 0;
        }
        })
    }

},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
    this.getUser();
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
 .el-header, .el-footer {
    background-color: #ffffff;
    color: #333;
    text-align: left;
    line-height: 60px;
  }
</style>